<template>
  <div class="body">
    <div>
      <div @click="$router.push('/postdetails/?id=' + postItem.id)">
        <div
          class="singlePicture"
          v-if="
            postItem.type == 1 &&
              postItem.cover.length >= 1 &&
              postItem.cover.length < 3
          "
        >
          <div class="left">
            <p>{{ postItem.title }}</p>
            <div class="news">
              <span>{{ postItem.user.nickname }}</span>
              <span class="comments"
                >{{
                  postItem.comments
                    ? postItem.comments.length
                    : postItem.comment_length
                }}跟帖</span
              >
            </div>
          </div>
          <div class="picture" v-if="postItem.cover[0].url">
            <img :src="filtersUrl(postItem.cover[0].url)" alt="" />
          </div>
        </div>
        <div
          class="morePicture"
          v-if="postItem.type == 1 && postItem.cover.length >= 3"
        >
          <p>{{ postItem.title }}</p>
          <div class="pictures">
            <img :src="postItem.cover[0].url" alt="" />
            <img :src="postItem.cover[1].url" alt="" />
            <img :src="postItem.cover[2].url" alt="" />
          </div>
          <div class="news">
            <span>{{ postItem.user.nickname }}</span>
            <span class="comments"
              >{{
                postItem.comments
                  ? postItem.comments.length
                  : postItem.comment_length
              }}跟帖</span
            >
          </div>
        </div>
        <div
          class="video"
          v-if="postItem.type == 2 && postItem.cover.length >= 1"
        >
          <p>{{ postItem.title }}</p>
          <div class="videoContent">
            <img :src="postItem.cover[0].url" alt="" />
            <span class="iconfont iconshipin"></span>
          </div>
          <div class="news">
            <span>{{ postItem.user.nickname }}</span>
            <span class="comments"
              >{{
                postItem.comments
                  ? postItem.comments.length
                  : postItem.comment_length
              }}跟帖</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["postItem"],
  // filters:{
  // 过滤器不能使用this
  //   url(){
  //     if(this.postItem.cover[0].url){

  //     }
  //     return
  //   }
  // }
  methods: {
    // 设置函数过滤路径 根据正则判断路径是不是完整的 再返回显示对应的路径
    filtersUrl(imgUrl) {
      const http = /^http/;
      if (http.test(imgUrl)) {
        return imgUrl;
      } else {
        // 拼接url
        return this.$axios.defaults.baseURL + imgUrl;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  .bottom-button {
    width: 160px;
    height: 40px;
  }
  .singlePicture {
    display: flex;
    justify-content: space-between;
    padding: 10/360 * 100vw;
    border-bottom: 1px solid #e4e4e4;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 4/360 * 100vw 0;
      p {
        color: #444;
      }
      .news {
        font-size: 13/360 * 100vw;
        color: #888;
        .comments {
          font-size: 12/360 * 100vw;
          margin-left: 10/360 * 100vw;
        }
      }
    }
    .picture {
      img {
        width: 121/360 * 100vw;
        height: 75/360 * 100vw;
        margin-left: 10/360 * 100vw;
        object-fit: cover;
      }
    }
  }
  .morePicture {
    padding: 10/360 * 100vw;
    border-bottom: 1px solid #e4e4e4;
    .pictures {
      display: flex;
      justify-content: space-between;
      padding: 10/360 * 100vw 0;
      //   padding-left: 8/360 * 100vw;
      img {
        display: block;
        // width: calc(33% - 2px);
        width: 112/360 * 100vw;
        height: 75/360 * 100vw;
        object-fit: cover;
      }
    }
    .news {
      font-size: 13/360 * 100vw;
      color: #888;
      .comments {
        font-size: 12/360 * 100vw;
        margin-left: 10/360 * 100vw;
      }
    }
  }
  .video {
    padding: 10/360 * 100vw;
    border-bottom: 1px solid #e4e4e4;
    .videoContent {
      position: relative;
      margin: 10/360 * 100vw 0;
      img {
        width: 340/360 * 100vw;
        height: 170/360 * 100vw;
        object-fit: cover;
      }
      .iconshipin {
        position: absolute;
        // display: flex;
        // justify-content: center;

        text-align: center;
        width: 46/360 * 100vw;
        height: 46/360 * 100vw;
        line-height: 46/360 * 100vw;
        font-size: 40/360 * 100vw;
        color: #fff;
        background-color: #888888ab;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        &:before {
          content: "\e650";
          padding-right: 2/360 * 100vw;
        }
      }
    }
    .news {
      font-size: 13/360 * 100vw;
      color: #888;
      .comments {
        font-size: 12/360 * 100vw;
        margin-left: 10/360 * 100vw;
      }
    }
  }
}
</style>
